<template>
	<view class="pages">
		<u-navbar title="商品参照" :autoBack="true" placeholder bgColor="#fff"></u-navbar>
		<view class="top-search">
			<view class="search-type" @click="pickerType = 'type'">{{ form.typeName }}
			  <u-icon name="arrow-down" size="24rpx"></u-icon>
			</view>
			<view class="top-input">
				<u--input
					placeholder="名称|条码|规格"
					border="surround"
					shape="circle"
					v-model="searchVal"
					@blur="blur"
				></u--input>
				<!-- <view class="btn" @click="pdaScanCode">
					PDA扫码
				</view> -->
				<image src="../../static/search.png" mode="widthFix"></image>
			</view>
			<view class="" @click="pdaScanCode">
				<u-icon name="scan" size="30"></u-icon>
			</view>
		</view>
		<view class="page-content">
		  <view class="list">
		    <view class="list-content" v-if="goodsList.length != 0">
		      <scroll-view class="scroll" scroll-y :style="{height: height}">
		        <view class="list-item" v-for="(item, index) in goodsList" :key="index">
							<view class="goods-top">
								<view class="goodsImg">
									<u-icon name="photo" size="28" @click="imageBig(item.FmaterialNumber)"></u-icon>
								</view>
								<view class="u-line-2" @click="toPage(item)">[{{item.FmaterialNumber}}]{{item.FmaterialName}}</view>
								<view class="icon" @click="toPage(item)">
									<u-icon name="arrow-right" size="20"></u-icon>
								</view>
							</view>
							<view class="goods-info">
								<view class="u-line-1" style="width: 50%;"><text style="color: #b2b2b2;">现存量：</text>{{item.ExistQty}}</view>
								<view class="u-line-1" style="width: 50%;"><text style="color: #b2b2b2;">可用量：</text>{{item.UseQty}}</view>
							</view>
							<view class="goods-info">
								<view class="u-line-1" style="width: 50%;"><text style="color: #b2b2b2;">商品重量：</text>{{ item.FmaterialWeight }}</view>
								<view class="u-line-1" style="width: 50%;"><text style="color: #b2b2b2;">采购员：</text>{{ item.PurChaser }}</view>
							</view>
							<view class="goods-info">
								<view class="u-line-1" style="width: 50%;"><text style="color: #b2b2b2;">零售价：</text>{{ item.RetailPrice }}</view>
								<view class="u-line-1" style="width: 50%;"><text style="color: #b2b2b2;">单价：</text>{{ item.RetailPrice }}</view>
							</view>
							<view class="goods-info">
								<view class="u-line-1" style="width: 50%;"><text style="color: #b2b2b2;">库存单位：</text>{{item.UnitName}}</view>
								<view class="u-line-1" style="width: 50%;" @click="unitClick(item, index)"><text style="color: #b2b2b2;">计价单位：</text>{{item.priceUnit}}</view>
							</view>
							<view class="goods-info">
								<view class="u-line-1"><text style="color: #b2b2b2;">商品属性：</text>{{ item.Attributes }}</view>
							</view>
							<view class="goods-info">
								<view class="u-line-1"><text style="color: #b2b2b2;">物料分组：</text>{{ item.FmaterialGroup }}</view>
							</view>
							<view class="goods-info">
								<view class="u-line-1"><text style="color: #b2b2b2;">包装量：</text>{{ item.FmaterialQty }}</view>
							</view>
							<view class="goods-info">
								<view class="u-line-3"><text style="color: #b2b2b2;">商品描述：</text>{{ item.FmaterialDes }}</view>
							</view>
							<view class="goods-info">
								<view class=""></view>
								<view class="sum">
									<view class="actionDown" @click="minus(item)">-</view>
									<view class="sum-text">
										<u--input border="surround" inputAlign="center" v-model="item.shopCarNum == 0 ? '' : item.shopCarNum" @blur="pageBlur($event, index, item)" type="number"></u--input>
									</view>
									<view class="actionUp" @click="plus(item)">+</view>
								</view>
							</view>
		        </view>
		      </scroll-view>
		    </view>
				<view style="text-align: center; margin-top: 50%;" v-else>
					暂无商品
				</view>
		  </view>
		</view>
		<view class="footer" :style="{'padding-bottom': isFullSucreen?'30px':'0'}">
		  <view class="foot-content">
		    <view class="left">
		      <view class="badge" @click="shopCarList.length == 0 ? specShow= false : specShow= true">
		        <image src="../../static/icon/大购物车.png" mode="widthFix">
						<text class="num">{{shopCarTotalNum}}</text>
		      </view>
		      <view class="money">
		        已选购{{shopCarTotalNum}}种，数量合计{{shopCarTotalGoodsNum}}
		      </view>
		    </view>
		    <view class="pay-btn" @click="toPay">添加商品</view>
		  </view>
		</view>
		<u-overlay :show="overlayShow" @click="overlayShow = false">
			<image class="overlayImage" :src="overlayImg" mode="widthFix"></image>
			<view class="saveBase" @click="saveBase">保存图片</view>
		</u-overlay>
		<u-picker :show="unitShow" :columns="columns" keyName="name" @cancel="unitShow = false" @confirm="confirmUnit"></u-picker>
		<u-popup :show="specShow" @close="specShow = false">
		  <view class="popup">
		    <view class="popup-list">
		      <view class="list-item" v-for="(item, index) in shopCarList" :key="index">
		        <!-- <image src="../../static/add.png" /> -->
		        <view class="info">
		          <view class="name u-line-2 u-flex-1">[{{item.FmaterialNumber}}]{{item.FmaterialName}}</view>
							<view class="sum">
								<view class="actionDown" @click="shopCarMinus(item)">-</view>
								<view class="sum-text">
									<u--input border="surround" inputAlign="center" v-model="item.shopCarNum" @blur="carBlur($event, item)" type="number"></u--input>
								</view>
								<view class="actionUp" @click="shopCarPlus(item)">+</view>
							</view>
		        </view>
		      </view>
		    </view>
		  </view>
		</u-popup>
		<u-picker ref="uPicker" :show="pickerType!=''" :columns="[pickerInfo[pickerType]]" keyName="name" @confirm="pickerConfirm" @cancel="pickerType = ''"></u-picker>
	</view>
</template>

<script>
	import { getExecuteServiceAll, getMaterialInformation, getExecuteServiceImg, getBaseImg } from '@/api/index'

export default {
  data() {
    return {
      isFullSucreen: this.isFullSucreen,
      goodsList: [],
      height:`calc(100vh - ${this.statusBarHeight + 44}px - 300rpx - ${this.isFullSucreen?'30px':'0'})`,
      specShow: false,
      shopCarList: [],
      orgInfo: {},
			searchVal: '',
			pricingUnitList: [],
			unitShow: false,
			overlayShow: false,
			overlayImg: '',
			columns: [],
			unitIndex: 0,
			// 物料编码：Materidal。规格型号：ModelName。物料名称：MaterialName
			pickerType: '',
			pickerInfo: {
			  type: [
					{
					  id: 'Materidal',
					  name: '物料编码'
					},
			    {
			      id: 'MaterialName',
			      name: '物料名称',
			    },
			    {
			      id: 'ModelName',
			      name: '规格型号'
			    },
			  ],
			},
			form: {
			  typeName: '物料编码',
			  type: 'Materidal',
			},
    }
  },
  computed: {
    shopCarTotalNum() {
			let shopCarTotalNum = this.shopCarList.length
			return shopCarTotalNum
		},
		shopCarTotalGoodsNum() {
			let shopCarTotalNum = 0
			this.shopCarList.forEach(item => {
				shopCarTotalNum = shopCarTotalNum + item.shopCarNum
			})
			return shopCarTotalNum
		},
  },
  watch: {

  },
  onLoad(option) {
    this.orgInfo = uni.getStorageSync('orgInfo')
		uni.setStorageSync('gwc_key', [])
		if(option.search) {
			this.searchVal = option.search
			this.form.typeName = option.typeName
			this.form.type = option.type
			this.blur()
		}
  },
  methods: {
		toPage(item) {
			this.jumpTo('/pages/inventoryQuery/inventoryQuery', {orgId: this.orgInfo.orgId, Materidal: item.FmaterialNumber, type: '1'})
		},
		// 查询项
		pickerConfirm(e) {
		  if(e.value[0].id) {
		    this.form[this.pickerType] = e.value[0].id
		    this.form[this.pickerType+'Name'] = e.value[0].name
		  } else {
		    this.form[this.pickerType] = ''
		    this.form[this.pickerType+'Name'] = ''
		  }
		  this.pickerType = ''
		  this.searchValue = ''
		},
		// 扫描触发
		pdaScanCode() {
			let that = this
			// 调起条码扫描
			uni.scanCode({
				scanType: ['barCode'],
				success: function (res) {
					uni.showLoading({ mask: true });
					const parameters = {
					  Materidal: res.result,
					  ModelName: '',
					  MaterialName: '',
						orgNumber: that.orgInfo.orgId
					}
					getExecuteServiceAll({json: JSON.stringify(parameters)}).then(ress => {
						if(ress.Material[0].FmaterialName) {
							uni.hideLoading();
							// 存入赠品字段
							ress.Material.forEach(item => {
								// item.goodsGifts = false
								item.remark = ''
								item.shopCarNum = 0
								item.priceUnit = item.UnitName
								item.priceUnitId = item.UnitFnumber
							})
							that.goodsList = ress.Material
						} else {
							uni.showToast({
								title: '查找失败',
								icon: 'none'
							});
						}
					})
				}
			});
		},
		blur() {
			if(this.searchVal.trim()!== '') {
				uni.showLoading({ mask: true });
				// 物料编码：Materidal。规格型号：ModelName。物料名称：MaterialName
				const parameters = {
					Materidal: '',
					ModelName: '',
					MaterialName: '',
					orgNumber: this.orgInfo.orgId
				}
				if(this.form.type == 'Materidal') {
					parameters.Materidal = this.searchVal
				} else if(this.form.type == 'MaterialName') {
					parameters.MaterialName = this.searchVal
				} else {
					parameters.ModelName = this.searchVal
				}
        getExecuteServiceAll({json: JSON.stringify(parameters)}).then(res => {
					if(res.Material[0].FmaterialName) {
						uni.hideLoading();
						// 存入赠品字段
						res.Material.forEach(item => {
							// item.goodsGifts = false
							item.remark = ''
							item.shopCarNum = 0
							item.priceUnit = item.UnitName
							item.priceUnitId = item.UnitFnumber
						})
						this.goodsList = res.Material
					} else {
						uni.showToast({
							title: res.Material[0].msg,
							icon: 'none'
						});
					}
				})
			} else {
				uni.showToast({
					title: '请输入内容',
					icon: 'none'
				});
			}
		},
		unitClick(item, index) {
			this.unitIndex = index
			this.columns = []
			uni.showLoading({ mask: true });
			const parameters = [
				{
					"FormId": "BD_UNIT",
					"FieldKeys": "fnumber,fname",
					"FilterString": "FUnitGroupId.fname='" + item.UnitName + "'",
					"OrderString": "",
					"TopRowCount": 0,
					"StartRow":0,
					"Limit": 2000,
					"SubSystemId": ""
				}
			]
			getMaterialInformation({parameters}).then(res => {
				this.unitShow = true
				uni.hideLoading();
				let arr = []
				res.forEach(item => {
					let obj = {}
					obj.name = item[1]
					obj.id = item[0]
					arr.push(obj)
				})
				this.columns.push(arr)
			})
		},
		confirmUnit(e) {
			this.goodsList[this.unitIndex].priceUnit = e.value[0].name
			this.goodsList[this.unitIndex].priceUnitId = e.value[0].id
			this.unitShow = false
		},
    toPay() {
			uni.setStorageSync('gwc_key', this.shopCarList)
      uni.navigateBack({
        delta: 1,
      })
    },
    async pageBlur(e, index, item) {
			let goodsArr = uni.getStorageSync('orderDataCache').goodsList
			if(goodsArr.some(i => i.FmaterialNumber === item.FmaterialNumber) && item.shopCarNum == 0) {
				const ress = await uni.showModal({
					title: '提示',
					content: '列表存在该商品，是否继续添加？'
				});
				if (ress.confirm) {
					// 用户点击确认，继续执行
					let num = e ? Number(e) : 0
					if(num <= 0) {
						item.shopCarNum = 0
					} else {
						item.shopCarNum = num
					}
					if(this.shopCarList.length == 0) {
						this.shopCarList.push(item)
					} else {
						if(this.shopCarList.some(j => j.FmaterialNumber == item.FmaterialNumber)) {
							this.shopCarList.forEach(i => {
								if(i.FmaterialNumber == item.FmaterialNumber) {
									i.shopCarNum = item.shopCarNum
								}
							})
						} else {
							this.shopCarList.push(item)
						}
					}
				} else {
					// 当前页面：返回前传递参数
					const pages = getCurrentPages();
					const prevPage = pages[pages.length - 2]; // 获取上一页实例
					// 方式二：调用上一页的方法（推荐）
					prevPage.$vm.xchPages(item.FmaterialNumber);
					// 返回上一页
					uni.navigateBack();
				}
			} else {
				let num = e ? Number(e) : 0
				if(num <= 0) {
					item.shopCarNum = 0
				} else {
					item.shopCarNum = num
				}
				if(this.shopCarList.length == 0) {
					this.shopCarList.push(item)
				} else {
					if(this.shopCarList.some(j => j.FmaterialNumber == item.FmaterialNumber)) {
						this.shopCarList.forEach(i => {
							if(i.FmaterialNumber == item.FmaterialNumber) {
								i.shopCarNum = item.shopCarNum
							}
						})
					} else {
						this.shopCarList.push(item)
					}
				}
			}
		},
		minus(item) {
			if(item.shopCarNum==0) {
				return
			}
			item.shopCarNum--
			this.shopCarList.forEach((i, index) => {
				if(i.FmaterialNumber == item.FmaterialNumber) {
					if(item.shopCarNum == 0) {
						this.shopCarList.splice(index, 1);
					}
				}
			})
		},
		async plus(item) {
			let goodsArr = uni.getStorageSync('orderDataCache').goodsList
			if(goodsArr.some(i => i.FmaterialNumber === item.FmaterialNumber) && item.shopCarNum == 0) {
				const ress = await uni.showModal({
					title: '提示',
					content: '列表存在该商品，是否继续添加？'
				});
				if (ress.confirm) {
					// 用户点击确认，继续执行
					item.shopCarNum++
					if(this.shopCarList.length == 0) {
						this.shopCarList.push(item)
					} else {
						if(this.shopCarList.some(j => j.FmaterialNumber == item.FmaterialNumber)) {
							this.shopCarList.forEach(i => {
								if(i.FmaterialNumber == item.FmaterialNumber) {
									i.shopCarNum = item.shopCarNum
								}
							})
						} else {
							this.shopCarList.push(item)
						}
					}
				} else {
					// 当前页面：返回前传递参数
					const pages = getCurrentPages();
					const prevPage = pages[pages.length - 2]; // 获取上一页实例
					// 方式二：调用上一页的方法（推荐）
					prevPage.$vm.xchPages(item.FmaterialNumber);
					// 返回上一页
					uni.navigateBack();
				}
			} else {
				item.shopCarNum++
				if(this.shopCarList.length == 0) {
					this.shopCarList.push(item)
				} else {
					if(this.shopCarList.some(j => j.FmaterialNumber == item.FmaterialNumber)) {
						this.shopCarList.forEach(i => {
							if(i.FmaterialNumber == item.FmaterialNumber) {
								i.shopCarNum = item.shopCarNum
							}
						})
					} else {
						this.shopCarList.push(item)
					}
				}
			}
		},
		carBlur(e, item) {
			let num = e ? Number(e) : 0
			if(num <= 0) {
				this.shopCarList.forEach((i, index) => {
					if(i.FmaterialNumber == item.FmaterialNumber) {
						this.shopCarList.splice(index, 1);
						if(this.shopCarList.length == 0) {
							this.specShow = false
						}
					}
				})
				return
			} else {
				this.shopCarList.forEach(i => {
					if(i.FmaterialNumber == item.FmaterialNumber) {
						i.shopCarNum = num
					}
				})
			}
		},
		shopCarMinus(item) {
			this.shopCarList.forEach((i, index) => {
				if(i.FmaterialNumber == item.FmaterialNumber) {
					i.shopCarNum--
					if(i.shopCarNum == 0) {
						this.shopCarList.splice(index, 1);
						if(this.shopCarList.length == 0) {
							this.specShow = false
						}
					}
				}
			})
		},
		shopCarPlus(item) {
			item.shopCarNum++
		},
		imageBig(idCode) {
			uni.showLoading({ mask: true });
			getExecuteServiceImg({ "parameters": [ {"MaterialNumber":idCode, "token":uni.getStorageSync('token')} ]}).then(res => {
				function getQueryParam(url, param) {
					// 构造正则表达式，匹配 ? 或 & 后面跟随的参数名称和其值
					const regex = new RegExp('[?&]' + param + '=([^&#]*)', 'i');
					const result = regex.exec(url);
					return result ? decodeURIComponent(result[1]) : null;
				}
				getBaseImg({ "parameters": [ {"FileId": getQueryParam(res.Url, 'fileId'), "StartIndex": 0 } ]}).then(bres => {
					if(bres.Result.FilePart) {
						uni.hideLoading();
						this.overlayImg = 'data:image/png;base64,' + bres.Result.FilePart
						this.overlayShow = true
					} else {
						uni.showToast({
							title: "暂无图片",
							icon: 'none'
						});
					}
				})
			})
		},
		
		saveBase64ToPhotoAlbum(base64Data) {
			// 1. 去除Base64头部信息（如："data:image/png;base64,"）
			const base64 = base64Data.replace(/^data:image\/\w+;base64,/, '');
			// 2. 转换为ArrayBuffer
			const arrayBuffer = uni.base64ToArrayBuffer(base64);
			// 3. 生成临时文件路径
			const filePath = `${wx.env.USER_DATA_PATH}/temp_${Date.now()}.png`;
			// 4. 写入文件
			const fs = uni.getFileSystemManager();
			return new Promise((resolve, reject) => {
				fs.writeFile({
				filePath,
				data: arrayBuffer,
				encoding: 'binary',
				success: () => {
					// 5. 保存到相册
					uni.saveImageToPhotosAlbum({
						filePath,
						success: () => resolve('保存成功'),
						fail: (err) => reject('保存失败，请检查权限：' + err.errMsg),
					});
				},
				fail: (err) => reject('文件写入失败：' + err.errMsg),
				});
			});
		},
		async saveBase() {
			try {
				const base64 = this.overlayImg;
				await this.saveBase64ToPhotoAlbum(base64);
				uni.showToast({ title: '保存成功', icon: 'success' });
				console.error("保存图片成功");
			} catch (error) {
				console.error("保存图片失败 error：", error);
				uni.showToast({ title: error, icon: 'none' });
				// 处理权限被拒绝的情况
				if (error.includes('authorize')) {
				uni.openSetting({}); // 引导用户打开权限设置
				}
			}
		},
  },
}
</script>

<style lang="scss" scoped>

	//文字平均分配    
	::v-deep .u-tabs__wrapper__nav[data-v-48634e29] {
		display: flex;
		flex-direction: row;
		position: relative;
		justify-content: space-between;
	}
	//选中蓝色滑块对应
	::v-deep .u-tabs__wrapper__nav__item {
	  flex: 1 1 0% !important;
	}
	.pages{
		width: 750rpx;
		min-height: 100vh;
		background-color: #F9F9F9;
		.top-search {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #d7dbd6;
			padding: 20rpx 30rpx;
			::v-deep .u-input {
				height: 75rpx;
				background-color: #fff;
				padding-left: 80rpx !important;
			}
			.search-type {
			  width: 180rpx;
			  font-size: 28rpx;
			  display: flex;
			  align-items: center;
			  gap: 6rpx;
			}
			.top-input {
				width: 450rpx;
				position: relative;
				.btn {
					position: absolute;
					top: 0;
					right: 20rpx;
					height: 75rpx;
					line-height: 75rpx;
					z-index: 99;
				}
				image {
					position: absolute;
					top: 20rpx;
					left: 24rpx;
					width: 40rpx;
					height: auto;
				}
			}
		}
		.top-tabs {
			width: 100%;
			padding: 10rpx 0 20rpx;
			border-top: 1px solid #6d7873;
			border-bottom: 1px solid #6d7873;
			background-color: #fff;
		}
		.page-content {
			::v-deep .u-input {
				width: 100rpx;
				padding: 8rpx !important;
			}
		}
		.list {
		  flex: 1;
		  display: flex;
		  flex-direction: column;
		  .list-content {
		    flex: 1;
		    display: flex;
		    flex-direction: column;
		    padding-top: 20rpx;
		    padding-bottom: 88rpx;
		    .scroll {
		      .list-item {
		        padding: 16rpx 42rpx;
		        margin-bottom: 20rpx;
						background: #FFF;
						.goods-top {
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;
							.goodsImg {
								width: 60rpx;
								height: 60rpx;
								margin-right: 20rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
							.icon {
								margin-left: auto;
							}
						}
						.goods-info {
							display: flex;
							justify-content: space-between;
							align-items: center;
							line-height: 45rpx;
							.sum {
								display: flex;
								align-items: center;
								margin-top: 16rpx;
								.actionDown {
									width: 50rpx;
									height: 50rpx;
									border-radius: 50rpx;
									border: 2rpx solid #266be9;
									font-size: 50rpx;
									color: #266be9;
									display: flex;
									justify-content: center;
								}
								.sum-text {
									margin: 0 10rpx;
								}
								.actionUp {
									width: 50rpx;
									height: 50rpx;
									border-radius: 50rpx;
									border: 2rpx solid #266be9;
									background-color: #266be9;
									font-size: 40rpx;
									color: #fff;
									display: flex;
									justify-content: center;
								}
							}
						}
		      }
		    }
		  }
		}
		.footer {
		  width: 750rpx;
		  position: fixed;
		  left: 0;
		  bottom: 0;
		  border-top: 2rpx solid #F1F1F1;
		  background: #FFF;
		  .foot-content {
		    width: 750rpx;
		    height: 98rpx;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    padding: 0 30rpx 0 50rpx;
		    .left {
		      display: flex;
		      align-items: center;
		      .badge {
		        position: relative;
		        margin-right: 40rpx;
		        image {
		          width: 70rpx;
		          height: auto;
		        }
		        .num {
							width: 30rpx;
							height: 30rpx;
							border-radius: 30rpx;
							line-height: 30rpx;
		          color: #FFF;
		          text-align: center;
		          font-family: "PingFang SC";
		          font-size: 20rpx;
		          background-color: #FF2E00;
		          position: absolute;
		          right: -4rpx;
		          top: -4rpx;
		        }
		      }
		      .money {
		        display: flex;
		        align-items: flex-end;
		        color: #333;
		        font-family: "PingFang SC";
		        font-size: 28rpx;
		        text {
		          color: #FF2E00;
		          font-size: 46rpx;
		          display: block;
		        }
		      }
		    }
		    .pay-btn {
		      width: 194rpx;
		      height: 70rpx;
		      border-radius: 100rpx;
		      background: #204df0;
		      color: #FFF;
		      font-family: "PingFang SC";
		      font-size: 36rpx;
		      display: flex;
		      align-items: center;
		      justify-content: center;
		    }
		  }
		}
		.popup {
		  padding-top: 24rpx;
			::v-deep .u-input {
				width: 100rpx;
				padding: 8rpx !important;
			}
			.popup-list {
			  width: 690rpx;
			  margin: 0 auto;
			  padding-bottom: 60rpx;
			  .list-item {
			    padding: 14rpx 18rpx 16rpx 24rpx;
			    position: relative;
			    display: flex;
					align-items: center;
			    border-radius: 10px;
			    background: #FFF;
			    margin-bottom: 20rpx;
			    image {
			      width: 100rpx;
			      height: 100rpx;
			      margin-right: 26rpx;
			    }
			    .info {
						flex: 1;
			      display: flex;
						align-items: center;
			      .name {
							width: 360rpx;
			        color: #000;
			        font-family: "PingFang SC";
			        font-size: 30rpx;
							margin-right: 40rpx;
			      }
			      .sum {
			      	display: flex;
							align-items: center;
			      	.actionDown {
			      		width: 40rpx;
			      		height: 40rpx;
			      		border-radius: 40rpx;
			      		border: 1px solid #266be9;
			      		line-height: 30rpx;
			      		font-size: 35rpx;
			      		text-align: center;
			      	}
			      	.sum-text {
			      		margin: 0 20rpx;
			      	}
			      	.actionUp {
			      		width: 40rpx;
			      		height: 40rpx;
			      		border-radius: 40rpx;
			      		border: 1px solid #266be9;
			      		background-color: #266be9;
			      		line-height: 30rpx;
			      		font-size: 35rpx;
			      		text-align: center;
								color: #fff;
			      	}
						}
			    }
			  }
			}
		  .popup-footer {
		    height: 90rpx;
		    border-top: 2rpx solid #F1F1F1;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    padding: 0 50rpx;
		    .money {
		      display: flex;
		      align-items: flex-end;
		      color: #333;
		      font-family: "PingFang SC";
		      font-size: 28rpx;
		      text {
		        color: #FF2E00;
		        font-size: 36rpx;
		        display: block;
		      }
		    }
		    .add-btn {
		      width: 180rpx;
		      height: 50rpx;
		      border-radius: 100rpx;
		      background: #F5AB1A;
		      color: #FFF;
		      font-family: "PingFang SC";
		      font-size: 28rpx;
		      display: flex;
		      align-items: center;
		      justify-content: center;
		    }
		  }
		}
	}
	.overlayImage {
		width: 80%;
		height: auto;
		margin: 300rpx auto 50rpx;
	}
	.saveBase {
		width: 200rpx;
		height: 60rpx;
	  line-height: 60rpx;
	  color: #fff;
	  background-color: #2677f0;
	  text-align: center;
		border-radius: 50rpx;
		margin: 0 auto;
	}
</style>